<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>4-3 组件参数校验与非 props 特性</title>
    <script src="../vue.js"></script>
</head>

<body>
    <div id="root">
        <child content="hello world"></child>
    </div>

    <script>
        Vue.component('child', {
            // props: ['content'],
            props: {
                //参数校验
                //1、规定传过来的数据content必须是string类型。  
                // content:String
                //2、数组方式,规定传过来的content要么是数字要么是字符串。
                // content: [Number, String]
                //3、对象方式
                content: {
                    //type表示数据要满足的类型
                    type: String,
                    //required表示是否必填（值为true/falsle）
                    required: false,
                    //default是数据默认的内容。
                    default: "yukai",
                    //validator是自定义校验器（名称是固定的，内容为自定义），value是传入的数据内容，不满足里面定义的内容就会报错。
                    validator(value) {
                        return value.length > 5
                    }
                }
            },
            template: '<div>{{content}}</div>'
        })

        var vm = new Vue({
            el: "#root"
        })
    </script>

    <!-- （1）props特性：
    定义：父组件通过属性向子组件传值的时候，子组件里声明了对父组件传递过来的属性的接收，父子组件有一个对应关系。
    特点：
    ①在子组件标签里定义的传递数据的属性不会在DOM里显示
    ②子组件里接收了父组件传递过来的属性后，在子组件里就可以通过插值表达式或者‘this.定义的接收数据的变量名’的方式去取得接收到的数据的内容了。
    （2）非props特性：
    定义：父组件向子组件传递了属性，但是子组件并没有声明接收父组件传递过来的内容。
    特点：
    ①因为没有接收父组件传递过来的内容，所以不能直接在子组件里使用，会报错。
    ②定义的属性会展示在子组件最外层的HTML标签的属性里面 -->
</body>

</html>